Refreshing and showing more content

Refreshing

Refresh is a pattern for manually or automatically refreshing content on a screen. Content can be either cached content, online content, or content with real-time state.

Refresh bar displays the following information:

  • Arrow indicator.
  • Instructions.
  • Spinner.

Arrow indicator and instructions help user accomplish refresh action. Time stamp shows last update date and time. Time stamp is optional; use it when date and time are important to user.

All of the patterns described on this page require a custom solution for LCDUI.

Refreshing by drag down

  • Drag down from beginning of the content area evokes Refresh bar.
    • If Search is available, drag down shows both Search bar and Refresh bar.
    • Refresh is not immediately started, the user needs to drag down more to start refreshing.
  • The arrow indicator turns around when dragged down slightly more.
  • If the user drags up slightly, the refresh bar shows its initial position.
  • The refresh is initiated when the user releases finger. Spinner shows in the refresh bar.
  • Use this refresh pattern when:
    • The application can open in offline mode and show cached content, or
    • The application needs a refresh function.
    • For example: Social network, feeds, and Email.

Note: In LCDUI, the refresh bar needs to be implemented as a custom component. For LWUIT, it is available off-the-shelf.

Automatic refresh

  • While opening the view, the view can be refreshed immediately and the refresh continues as long as the user remains in this view.
  • While refreshing is running, the group header area shows a spinner.
  • Use this refresh pattern when:
    • The view content is separated into several groups and user can refresh each group content separately.
Note: Group headers with spinners needs to be implemented as a custom solution in LCDUI. They are available for LWUIT.

Showing more

While the user is at the end of the content area, more content can be displayed by dragging from the bottom of the view.
  • Can be used if your application fetches content in bulks and the user needs access to the next bulk.
  • Older content is hidden from the UI to make scrolling manageable.
  • The user drags up some more to fetch the next bulk of content.
  • Once the showing more is done, the next bulk of content is shown below the current bulk of content.

Showing more by dragging up

  • Drag up from end of content shows the showing more bar, but showing more is not immediately started.
  • User can abort the action in two ways:
    • Release without evoking showing more, or
    • drag down without evoking showing more.
  • Drag up slightly more and the arrow indicator turns around.
    • If the user drags down slightly, the showing more bar shows its initial position.
    • The showing more is initiated when the user releases finger.
      • Spinner shows in the Showing more bar.
  • Use this pattern when:
    • User is scrolling very quick in the view and the application needs some time to show the content.
      • In this case, the first two steps are not needed, show 'loading more' and spinner directly.
    • If your application fetches content in bulks and the user needs access to the next bulk.
    • The user is at the end of the content area.
    • If older content is hidden from the UI to make scrolling manageable.
    • Typical applications using this pattern could be Social network, feeds, and messaging.

Note: The showing more by dragging up pattern needs to be implemented with custom components both in LCDUI and LWUIT.
© Nokia 2013.